<template>
	<view class="container">
		<!-- 居中区域，但不强制垂直居中全屏 -->
		<view class="user-info-wrapper">
			<!-- 第一行：头像 -->
			<button class="row avatar-row share-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<u--image :src="userInfo.imgUrl" width="80px" height="80px" shape="circle" class="avatar"
					:showLoading="true"></u--image>
			</button>

			<!-- 第二行：昵称 + 输入框 -->
			<view class="row nickname-row">
				<!-- 昵称 -->
				<text class="nickname-label">昵称</text>

				<!-- 输入框 -->
				<input type="nickname" class="nickname-input" :value="userInfo.nickName" placeholder="请输入昵称"
					@input="onInputChange" />
			</view>

			<!-- 第二行：昵称 + 输入框 -->
			<view class="row nickname-row">
				<up-button class="nickname-row-btn" text="保存" type="primary" @click="saveUserInfo"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	import {
		getUserInfoRequest,
		saveUserInfoRequest
	} from '@/request/user.js'

	import {
		webconst
	} from '@/utils/webconst.js'

	import {
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import {
		uploadWxImage
	} from '@/utils/uploadimage.js'

	import {
		goToInternalPage
	} from '@/utils/jump.js'



	const userInfo = ref({
		imgUrl: webconst.default_profile,
		nickName: "",
		code: ""
	})

	// 页面生命周期（uni-app）
	onShow(() => {

		console.log('个人中心页面加载')
		uni.showShareMenu({
			withShareTicket: true,
			// 显示分享到聊天、朋友圈
			showShareItems: ['shareAppMessage']
		})
		//进入页面默认调用登录
		getUserInfo();
		
	})
	
	
	//获取用户信息
	const getUserInfo = () => {
		getUserInfoRequest().then((res) => {
			if (res.code == 0) {
				//理论上要存储到本地内存中这里暂时不处理以后需要再处理
				userInfo.value = {
					nickName: res.data.nickName,
					imgUrl: res.data.imgUrl == "" ? webconst.default_profile : res.data.imgUrl,
					code: res.data.code
				}

			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});

	}

	//保存用户信息
	const saveUserInfo = () => {
		if (userInfo.value.nickName == "") {
			uni.showToast({
				title: "昵称不能为空",
				icon: 'none'
			})
			return;
		}

		saveUserInfoRequest({
			nickName: userInfo.value.nickName ?? "",
			imgUrl: userInfo.value.imgUrl ?? ""
		}).then((res) => {
			if (res.code == 0) {
				//理论上要存储到本地内存中这里暂时不处理以后需要再处理
				goToInternalPage("usercenter/index")
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});

	}

	const onInputChange = (e) => {
		const nickName = e.detail.value
		userInfo.value.nickName = nickName;
	}

	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		console.log(avatarUrl);
		userInfo.value.imgUrl = avatarUrl;
		uploadWxImage(avatarUrl)
			.then((res) => {
				console.log(res.filePath);
				userInfo.value.imgUrl = res.filePath;
			})
	}
</script>

<style lang="scss" scoped>
	/* 容器：不再全屏居中，只保留上边距 */
	.container {
		padding: 40px 20px 20px;
		/* 上40px留白，避免顶头 */
		background-color: #ffffff;
		min-height: 100vh;
	}

	/* 内容块：居中，不撑满 */
	.user-info-wrapper {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		/* 水平居中 */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		background-color: #ffffff;
		/* 行间距小一点，下边框来分隔 */
	}

	/* 每一行通用样式 */
	.row {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 20px 0;
		/* 上下内边距 */
		//border-bottom: 1px solid #eee;
		/* 每行加下边框 */
	}

	/* 最后一行去掉下边框（可选） */
	.row:last-child {
		border-bottom: none;
	}

	/* 第一行：头像 */
	.avatar-row {
		/* 可以稍微加大头像行的 padding */
		background-color: #ffffff;
		border: 0px;
	}

	/* 第二行：昵称 + 输入框 */
	.nickname-row {
		gap: 12px;
	}

	/* 昵称样式 */
	.nickname-label {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	/* 输入框样式 */
	.nickname-input {
		flex: 1;
		font-size: 16px;
		color: #666;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 6px;
		max-width: 200px;
	}

	.nickname-input::placeholder {
		color: #ccc;
	}

	.nickname-row-btn {
		border-radius: 20px;
	}
	
	.share-btn {
	  background: transparent;
	  padding: 0;
	  margin: 0;
	  border: none;
	  line-height: initial;
	}
	
	/* 隐藏 button 默认样式 */
	.share-btn::after {
	  border: none;
	  display: none;
	}
</style>